<template>
  <HomePanel ref="target" title="人气推荐" sub-title="人气爆款 不容错过">
    <template #right>
      <!-- more全局组件 -->
      <XtxMore />
    </template>

    <!-- 商品列表组件 -->
    <!-- 商品数据数组传值给子组件 -->
    <HomeList :goods="hotList" />
  </HomePanel>
</template>
<script>
// 导入商品列表渲染组件
import HomeList from './home-list.vue'

// 导入
import HomePanel from './home-panel.vue'
// 导入api
import { findHot } from '@/api/home'
import { ref } from 'vue'
// 导入
import { useObserver } from '@/hock/index'

export default {
  // 注册组件
  components: {
    HomePanel,
    HomeList
  },

  setup () {
    // 定义一个空数组列表
    const hotList = ref([])
    const getHotList = async () => {
      // 调用接口,并解构赋值出来
      const { result } = await findHot()
      //   console.log(11, result)
      // 重新赋值
      hotList.value = result
    }

    // // 挂载后
    // onMounted(() => {
    //   // 调用获取人气推荐
    //   getHotList()
    // })

    // 调用懒加载的方法,把获取的数据的方法的当做参传过去,并且解构赋值出来 target
    const { target } = useObserver(getHotList)

    return { hotList, target }
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 426px;
  li {
    width: 306px;
    height: 406px;
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
    }
    .desc {
      color: #999;
      font-size: 18px;
    }
  }
}
</style>
